import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { Link } from 'react-router';
import { Carousel, Grid, ListView } from 'antd-mobile';
import Ajax from 'lib/Ajax';
import List from 'mixin/list'

@inject('appStore', 'languageStore')
@observer
class ModuleName extends List {
	constructor(props) {
    super(props);

    this.state = Object.assign({
			bannerList: [],
			activeCode: ''
    }, this.state);
		this.listApi = '/experience/list'
  }

  componentDidMount(){
		this.fetchList(1);
		this.fetchBanner();
  }

  fetchBanner = ()=>{
    const self = this;
    Ajax({
      url: '/bannerimg/list',
      data: {
        bannerType: 20
      },
      success: function(result){
        self.setState({
          bannerList: result
        });
      },
      error: function(error){
        Toast.info(error||'请求失败');
      }
    });
  }

	renderRow = (rowData, sectionID, rowID)=>{
    const { imgBaseUrl, commonData } = this.props.appStore;
    return (
        <div key={rowID} className="activity-item">
          <Link to={`/experience/${rowData.experienceId}`}>
            <img src={`${imgBaseUrl}${rowData.listImg}`} alt=""/>
            <div className="row-text">
              <div className="t">{rowData.title}</div>
              <div className="b">
                {rowData.createTime}
                <span className="fr">阅读量{rowData.readCount}</span>
              </div>
            </div>
          </Link>
        </div>
      );
  }

  render() {
    const homeData = this.props.languageStore.getPageData('home');
		const { imgBaseUrl, commonData } = this.props.appStore;

    return (
    	<div className="experience">
				<Carousel
					className="slider"
					autoplay={false}
					infinite
					selectedIndex={1}
					swipeSpeed={35}
					beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
					afterChange={index => console.log('slide to', index)}
				>
					{this.state.bannerList.map((ii, index) => (
						<Link to={ii.url} key={index}>
              <img
                src={`${imgBaseUrl}${ii.imagePath}`}
              />
            </Link>
					))}
				</Carousel>
		    <div className="select-list" style={{marginTop: '.2rem'}}>
					{
						(commonData.experienceTypeEn||[]).map(item=>{
							return <div className="select-item" key={item.code}><p className={item.code == this.state.activeCode?'active':''} onClick={()=>{
								this.doSearch({
									categoryId: item.code
								})
								this.setState({
									activeCode: item.code
								});
							}}>{item.mean}</p></div>
						})
					}
				</div>
				<div className="warden-list" style={{marginTop: '.2rem'}}>
					<div className="list">
						<ListView ref="lv"
							dataSource={this.state.dataSource}
							renderFooter={this.renderFooter}
							renderRow={this.renderRow}
							className="fortest"
							pageSize={4}
							scrollRenderAheadDistance={500}
							scrollEventThrottle={20}
							onScroll={() => { console.log('scroll'); }}
							onEndReached={this.onEndReached}
							onEndReachedThreshold={10}
							stickyHeader
						/>
					</div>
				</div>
    	</div>
    )
  }
}

module.exports = ModuleName
